<template>
    <div class="dice">
        <div class="info">
            <el-button type="primary" @click="throwDice()">投掷骰子</el-button>
            &emsp;
            <span class="result" v-if="runStatus == 1">投掷中...</span>
            <span class="result" v-if="runStatus == 2">点数：{{ number }}</span>
        </div>
        <div class="box" :class="boxClass">
            <div class="inner">
                <div class="aspect" v-for="item in 6" :key="item"></div>
            </div>
            <div class="outer">
                <div class="aspect" v-for="item in 6" :key="item">
                    <div class="dot" v-for="dot in item" :key="dot"></div>
                </div>
            </div>
            <div>
                <div class="cover"></div>
                <div class="cover"></div>
                <div class="cover"></div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    data() {
        return {
            number: 1,
            type: 1,
            runStatus: 0, // 0 未运行过，1 运行中，2 运行完成
            isBig: false,
        };
    },
    computed: {
        boxClass(): string {
            if (this.runStatus == 0) {
                return "rolling";
            }
            if (this.runStatus < 0) {
                return "run_1";
            }
            return "run_" + this.number + (this.isBig ? " run_big" : "");
        },
    },
    methods: {
        throwDice() {
            if (this.runStatus == 0) {
                this.runStatus = -1;
                setTimeout(this.runDice, 10);
            } else {
                this.runDice();
            }
        },
        runDice() {
            if (this.runStatus == 1) return;
            this.runStatus = 1;
            // 随机生成1~6
            this.number = Math.ceil(Math.random() * 6);
            this.isBig = !this.isBig;
            // 动画完毕
            setTimeout(() => {
                this.runStatus = 2;
            }, 2000);
        },
    },
});
</script>
<style scoped lang="scss" src="./dice.scss"></style>
